1
00:00:00,510 --> 00:00:05,920
حسنًا، من أجل تصميم هذا، سنتناول هذا القسم قسمًا أولاً.

2
00:00:06,600 --> 00:00:13,650
أولاً، سنقوم بتصميم المدخلات ومن ثم سنقوم ببيع الزر ومن ثم المكون الكامل فقط

3
00:00:13,650 --> 00:00:16,940
لذلك ينتهي الأمر بالظهور كعلامتنا النهائية.

4
00:00:17,860 --> 00:00:24,010
إذن ما يتعين علينا القيام به هو أنه يتعين علينا بالفعل إنشاء مكون جديد لإدخال النموذج وسوف يعمل

5
00:00:24,010 --> 00:00:32,140
تمامًا مثل الإدخال العادي، ولكن مع التصميم الخاص بنا، بما في ذلك إدارة الملصق

6
00:00:32,140 --> 00:00:36,190
وهذا التفاعل الصغير الصغير عند النقر عليه.

7
00:00:39,200 --> 00:00:39,950
كيف نفعل هذا؟

8
00:00:40,820 --> 00:00:45,230
حسنًا، لنقم أولاً بإنشاء مكون جديد يسمى.

9
00:00:46,420 --> 00:00:47,440
إدخال النموذج.

10
00:00:50,390 --> 00:00:58,040
وسنعمل على إنشاء مكون الإدخال الرسمي الخاص بنا، مثل الجنس وأنماط إدخال النموذج، والأفكار،

11
00:00:58,040 --> 00:00:59,600
الجنس كالعادة.

12
00:01:02,040 --> 00:01:07,080
وداخل إدخال النموذج الخاص بنا، سيكون أ.

13
00:01:09,530 --> 00:01:10,310
مكون وظيفي.

14
00:01:13,470 --> 00:01:15,990
لأننا لا نريد أي دولة على هذا المكون.

15
00:01:19,110 --> 00:01:27,150
ما سيتطلبه الأمر هو تغيير المقبض ودعم الملصق ثم بقية الدعائم.

16
00:01:29,630 --> 00:01:34,100
سنقوم بإعادة الهيكلة لأننا سنقوم بنشر ذلك في المدخلات.

17
00:01:35,120 --> 00:01:40,820
الآن، السبب وراء حاجتنا إلى تغيير المقبض هذا هو أننا نريد أن ننفجر.

18
00:01:42,180 --> 00:01:48,570
أي تغيير قام به الإمبراطور، لكننا سنجمع مكوننا بالكامل في مجموعة لأن

19
00:01:48,570 --> 00:01:51,600
نريد أن تكون التسمية والمدخلات معًا.

20
00:01:52,030 --> 00:01:53,730
لذلك سوف يسمى هذا مجموعة.

21
00:01:55,070 --> 00:01:57,620
ومن ثم سيكون هناك دائمًا مدخلات.

22
00:01:59,350 --> 00:02:08,260
وسيكون للإدخال اسم فئة إدخال النموذج عند التغيير، ثم سيتم ربط تغيير المقبض الخاص بنا.

23
00:02:08,830 --> 00:02:14,380
لذا، يبدو هذا الآن تمامًا مثل ما حصلنا عليه سابقًا داخل مكون Sinon الخاص بنا.

24
00:02:15,740 --> 00:02:18,170
ما زلنا نجد أي تغيير في المقبض.

25
00:02:19,290 --> 00:02:28,080
يتم تمريرها إلى التغيير وبعد ذلك سنقوم بنشر الدعائم الأخرى هنا وكل هذه الدعائم الأخرى

26
00:02:28,080 --> 00:02:29,880
الدعائم سوف تكون في نهاية المطاف.

27
00:02:31,700 --> 00:02:39,020
جميع الدعائم التي مررناها هنا، بما في ذلك قيمة نوع الاسم المطلوبة، سيتم حذفها جميعًا

28
00:02:39,020 --> 00:02:44,420
ليتم تمريرها إلى مكون إدخال النموذج الخاص بنا مثل الدعائم الأخرى.

29
00:02:45,440 --> 00:02:47,460
الآن، لماذا نحتاج إلى دعامة التسمية هذه؟

30
00:02:48,050 --> 00:02:54,890
حسنًا، ما تدعمه هذه التسمية هو أننا سنقوم في الواقع بعرض تسمية بشكل انتقائي لأننا لا نعرف

31
00:02:55,460 --> 00:02:57,650
إذا كنا فعلا في حاجة إليها أم لا.

32
00:02:58,590 --> 00:03:06,120
إذا مرر المستخدم تسمية، فصحيح، أو آسف، إذا كان مطورًا، إذا أردنا تمرير خاصية تسمية،

33
00:03:06,120 --> 00:03:07,140
ثم سنقوم بإنشاء واحدة.

34
00:03:07,380 --> 00:03:09,310
إذا لم نفعل ذلك، فلا داعي لذلك.

35
00:03:10,260 --> 00:03:12,930
لذلك سنقوم بإنشاء مكون التسمية.

36
00:03:14,640 --> 00:03:21,070
وإلا فإننا لن نعرض أي شيء، وتعد القيمة null طريقة رائعة لعدم ظهور أي شيء.

37
00:03:21,720 --> 00:03:25,230
إذن هنا ما سنقوم بتقديمه هو.

38
00:03:26,390 --> 00:03:27,140
التسمية لدينا.

39
00:03:28,220 --> 00:03:31,130
مع اسم فئة.

40
00:03:32,100 --> 00:03:38,280
هذه القيمة، لذا ما سنفعله هو أننا سنعرضها بشكل انتقائي.

41
00:03:39,600 --> 00:03:42,090
قيمة محرفة بسلسلة.

42
00:03:43,150 --> 00:03:46,660
حيث نأخذ قيمة المخزون الدعامة على طول.

43
00:03:48,150 --> 00:03:50,310
فإذا كانت قيمتنا موجودة.

44
00:03:51,790 --> 00:03:56,140
ثم سنقوم بتطبيق هذه الفئة من الانكماش.

45
00:03:58,000 --> 00:03:58,690
خلاف ذلك.

46
00:03:59,760 --> 00:04:00,990
ستكون سلسلة فارغة.

47
00:04:02,050 --> 00:04:04,540
وسيكون لدينا دائمًا نموذج ومدخلات وتسمية.

48
00:04:06,130 --> 00:04:12,370
عذرًا، الدعائم الأخرى، لذلك ستحتوي هذه التسمية دائمًا على اسم الفئة والنموذج وتسمية الإدخال، لكننا سنفعل ذلك

49
00:04:12,370 --> 00:04:19,060
قم أيضًا بإضافة خاصية التقليص هذه عندما يكتب المستخدم أي شيء.

50
00:04:20,430 --> 00:04:28,620
الآن، هذا مخصص بشكل أساسي لبعض المتصفحات التي سيتم إكمالها تلقائيًا عندما تصل إلى هذا الجزء من

51
00:04:28,620 --> 00:04:32,100
صفحة تسجيل الدخول الفعلية، سأوضح لك ما أعنيه.

52
00:04:32,760 --> 00:04:34,890
لكننا سنقوم أيضًا بتقديم نص التسمية.

53
00:04:37,050 --> 00:04:40,380
الآن، كالعادة، لقد قدمت التصميم لنا.

54
00:04:41,960 --> 00:04:46,190
وسألقي نظرة سريعة على ما هو موجود هنا.

55
00:04:47,320 --> 00:04:57,700
إذن ما نقوله هو أن هذا متغير SACE، حيثما نسميه اللون الفرعي سوف يحل محله

56
00:04:57,700 --> 00:05:02,380
باللون الرمادي، أينما نسميه اللون الرئيسي، سيتم استبداله باللون الأسود.

57
00:05:03,190 --> 00:05:09,970
ومن ثم يعد هذا المزيج في الملصق المتقلص طريقة سهلة بالنسبة لنا لتضمين مجموعة النجاح الكاملة هذه

58
00:05:10,000 --> 00:05:17,380
في كل مكان نقول في التضمين ومن ثم ذلك الملصق المتقلص، هذا المزيج لذا فإن المزيج الإضافي يشبه إلى حد ما إمكانية إعادة الاستخدام

59
00:05:17,380 --> 00:05:21,070
قطع النجاح التي يمكننا وضعها داخل كود المصدر الخاص بنا.

60
00:05:22,180 --> 00:05:27,760
وبهذه الطريقة، لا يتعين علينا تكرار نفس الشيء، وإذا أردنا تغيير أي شيء، يمكننا ذلك

61
00:05:27,760 --> 00:05:31,300
فقط قم بتعديله هنا وفي أي مكان تتم الإشارة إليه فيه يتم تحديثه.

62
00:05:32,560 --> 00:05:39,250
الآن، الشيء الرئيسي الذي يجب التركيز عليه والذي تغيرنا هو أننا نريد التركيز.

63
00:05:40,460 --> 00:05:48,890
عندما يركز المستخدم، أي عندما يختار أو عندما يركز المتصفح على هذا الإدخال،

64
00:05:49,760 --> 00:05:56,360
ثم نريد استهداف تسمية إدخال النموذج ونريد تضمين تسمية تقليص.

65
00:05:57,320 --> 00:05:57,510
يمين.

66
00:05:57,610 --> 00:06:04,520
لذلك نريد نقله لأعلى، وتغيير حجم الخط وتغيير اللون، لأن علامتنا التجارية الآن هي في الواقع

67
00:06:04,520 --> 00:06:06,800
يجلس داخل لدينا.

68
00:06:07,870 --> 00:06:09,940
المكون، كما سترى هنا.

69
00:06:12,090 --> 00:06:14,450
إنه يقع مباشرة فوق الواقع.

70
00:06:15,770 --> 00:06:21,770
الإدخال نفسه، ومن خلال القيام بذلك، فإننا نضيف انتقالًا.

71
00:06:22,890 --> 00:06:30,330
هنا 300 مللي ثانية، لذا في اللحظة التي يتم فيها تحديث هذه الخصائص، يكون هناك تحول

72
00:06:30,330 --> 00:06:32,610
من نطاق المللي ثانية لهذا التغيير.

73
00:06:33,240 --> 00:06:38,580
والآن إذا قمنا بحفظ النموذج الخاص بنا ووضعه.

74
00:06:41,120 --> 00:06:47,090
إذا أضفناه إلى علامتنا ومكوننا، فسنرى المكون الجديد في الكود الخاص بنا.

75
00:06:49,970 --> 00:06:52,580
للمدخلات من.

76
00:06:53,420 --> 00:06:56,420
إدخال النموذج من كمبيوتر أبل.

77
00:06:58,830 --> 00:07:03,720
الآن، دعونا فقط نستبدل هذا بهذه الطريقة.

78
00:07:04,660 --> 00:07:10,660
والآن، بدلاً من التغيير، سنقوم بإضافة تغيير المقبض الخاص بنا.

79
00:07:13,180 --> 00:07:18,670
لأن هذا هو الاسم الذي قررنا أن نطلقه على ممتلكاتنا، والآن إذا نظرنا إلى قاعدة الرموز الخاصة بنا،

80
00:07:19,510 --> 00:07:22,870
سنرى أن هذا هو المكون الجديد لدينا.

81
00:07:32,590 --> 00:07:39,580
نحتاج أيضًا الآن إلى إضافة تصنيفنا، لذا سأقول هنا البريد الإلكتروني ثم بالنسبة لهذه التسمية، أنا

82
00:07:39,580 --> 00:07:41,350
أيضا سوف أقول كلمة المرور.

83
00:07:43,080 --> 00:07:43,650
قلنا مرة أخرى.

84
00:07:45,470 --> 00:07:49,880
دعونا لا نقوم بتحديث كلمة المرور تلك، فنحن نرى وظائفنا.

85
00:07:51,940 --> 00:07:55,990
رائع، لذا دعونا نتخلص من هذه التسمية وهذه التسمية.

86
00:07:59,080 --> 00:08:03,250
والآن يبدو إدخال النموذج كما ينبغي.

87
00:08:06,540 --> 00:08:13,770
فلماذا يكون ممتلئًا لأنه دائمًا ما يقوم بتوسيع العرض الكامل للمكون الخاص بنا، لذا

88
00:08:13,770 --> 00:08:18,540
بالنسبة لعنصر Sinon الخاص بنا، يمكننا أيضًا إضافة.

89
00:08:20,630 --> 00:08:21,710
بعض التصميم هنا.

90
00:08:22,970 --> 00:08:31,160
بحيث يكون العرض دائمًا 30 عرضًا بحيث يكون دائمًا 30 بالمائة من إجمالي العرض والآن نحن

91
00:08:31,160 --> 00:08:31,610
لديك.

92
00:08:32,460 --> 00:08:36,810
مكون ذو مظهر أفضل يبدو أكثر تشابهًا مع الشكل النهائي لدينا.

93
00:08:37,880 --> 00:08:38,330
نعم.

94
00:08:39,350 --> 00:08:40,700
الآن، لنبدأ بالزر.